<!--学员管理-->
<template>
  <div class="student_management_container">
    <div class="search_box">
      <!-- <el-button type="primary" class="fl" @click="showPopup">新增</el-button> -->
      <div class="btn btn_add" @click="showPopup('ruleForm')">
        <i class="el-icon-plus"></i>
        <span class="btn_txt">新建学员</span>
      </div>
      <!-- <div class="btn btn_add" >
        <i class="el-icon-plus"></i>
        <span class="btn_txt">批量导入</span>
      </div> -->
      <div class="fr">
        <el-form :model="searchForm" :inline="true" class="searchForm"  >
          <el-form-item size="small" style="width:150px;">
            <el-select v-model="searchForm.schoolId" placeholder="校区">
              <el-option v-for="(item,key) in schoolList" :key="key" :label="item.schoolName" :value="item.schoolId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item size="small" style="width: 220px; margin-right: 0;">
            <el-input placeholder="输入姓名/学号/手机号" size="small" v-model="searchForm.searchValues" @keyup.enter.native="searchData(searchValue)">
              <div slot="append" class="btn_search" @click="searchData(searchValue)">查询</div>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="clear"></div>
    </div>
    
    <div class="table_box">
      <adminTable :tableHead="tableHead" :tableData="tableData"></adminTable>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.curPage"
        :page-sizes="[10, 20, 50]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalRows">
      </el-pagination>
    </div>

    <transition name="el-fade-in-linear">
      <div class="popup-container" v-show="popupState.showStatus">
        <div class="popup">
          <i class="el-icon-error icon_close" @click="popupState.showStatus = false;"></i>
          <div class="title">{{popupState.popupName}}</div>

          <div class="content">
            <el-form :model="formData" ref="ruleForm" :rules="rules" label-position="left" :class="{'checkPopup': checkStatus}" :disabled="checkStatus" style=""
              label-width="90px" class="form">
              <div style="overflow:hidden">
                <el-form-item label="姓名 : "  prop="studentName"  size="small" class="fl">
                  <el-input v-model="formData.studentName" autocomplete="off" placeholder="输入学员姓名"></el-input>
                </el-form-item>
                
                <el-form-item label="性别 : " prop="sex" size="small" class="fl ">
                  <el-select v-model="formData.sex" placeholder="选择性别">
                    <el-option key="1" label="男" value="1"></el-option>
                    <el-option key="2" label="女" value="2"></el-option>
                  </el-select>
                </el-form-item>



                <el-form-item label="联系人 : " prop="linkPerson" size="small" class="fl no_margin_right">
                  <el-input  v-model="formData.linkPerson" autocomplete="off" placeholder="输入联系人"></el-input>
                </el-form-item>
                <el-form-item label="手机号码 : " prop="linkPhone" size="small" class="fl">
                  <el-input  v-model="formData.linkPhone" maxlength=11 autocomplete="off" placeholder="输入手机号码"></el-input>
                </el-form-item>
                
                <el-form-item label="微信 : " prop="wechat" size="small"  class="fl not_must">
                  <el-input  v-model="formData.wechat" autocomplete="off" placeholder="输入微信"></el-input>
                </el-form-item>
                <!-- <div class="clear"></div> -->

                <el-form-item label="身份证号 : " prop="idCard" size="small"  class="fl not_must no_margin_right">
                  <el-input  v-model="formData.idCard" autocomplete="off" placeholder="输入身份证号"></el-input>
                </el-form-item>

                

                <el-form-item label="所属校区 : "  style="width: 45%" prop="schoolId" size="small" class="fl not_must">
                  <el-select v-model="formData.schoolId" placeholder="选择所属校区" @change="schoolChange">
                    <el-option v-for="(item,key) in schoolList" :key="key" :label="item.schoolName" :value="item.schoolId">
                    </el-option>
                  </el-select>
                </el-form-item>

                

              </div>

            </el-form>

            <div class="btn_box">
              <div class="btn btn_add" v-if="popupState.popupName == '新建学员'" @click="submitAdd('ruleForm')">
                <span class="btn_txt">保存</span>
              </div>

              <div class="btn btn_add" v-if="popupState.popupName == '编辑学员'" @click="submitEdit('ruleForm')">
                <span class="btn_txt">保存</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </transition>
  </div>
</template>


<style scoped>
.student_management_container .btn_add i {
  margin-right: 5px;
  margin-left: 10px;
}


</style>

<script>
import adminTable from '@/components/assembly/adminTable'
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("studentManagement");
export default {
  name: 'studentManagement',
  data() {
    return {
      studentId: '',
      checkStatus: false,
      updateStatus: false,
      popupState: {
        showStatus: false,
        popupName: '新建学员',
      },
      page: {
        curPage: 0,
        pageSize: 0,
        totalRows: 0,
      },
      searchForm: {
        schoolId: '',
        entryType: '',
        positionType: '',
        searchValues: '',
      },
      formData: {
        studentName: '',
        sex: '',
        linkPerson: '',
        linkPhone: '',
        wechat: '',
        idCard: '',
        schoolId: '',
      },
      searchValue: '',

      tableHead: {
        // border: true,
        // order: true,
        operation_width: '200px',
        setFunction: [
          {
            // showState: "0",
            // hideKey: "flag",
            fun: this.tableDetail,
            name: "详情"
          },
          {
            // showState: "0",
            // hideKey: "flag",
            fun: this.tableEdit,
            name: "编辑"
          },
          {
            fun: this.tableDelete,
            name: "删除"
          },
        ],
        data: [
          {
            name: '学员姓名',
            key: 'studentName',
            align: 'center',
          },
          {
            name: "学号",
            key: "studentNo",
            align: "center"
          },
          {
            name: "所属校区",
            key: "schoolName",
            align: "center"
          },
          {
            name: "联系人",
            key: "linkPerson",
            align: "center"
          },
          {
            name: "手机号码",
            key: "linkPhone",
            align: "center"
          },
          {
            name: "微信",
            key: "wechat",
            align: "center"
          },
          {
            name: "性别",
            key: "sex",
            align: "center",
            width: '50',
            filter: {
              1: '男',
              2: '女',
            }
          },
          {
            name: "身份证号",
            key: "idCard",
            align: "center"
          },
        ]
      },
      tableData: [],

      schoolList: [],

      rules: {
        studentName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' },
        ],
        linkPerson: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
        ],
        linkPhone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {pattern: /^1[34578]\d{9}$/, message: '手机号格式错误'}
        ],
        idCard: [
          { required: false, message: '请输入身份证号', trigger: 'blur' },
          {pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号格式错误'}
        ],
        schoolId: [
          { required: false, message: '请选择校区', trigger: 'change' },
        ],
      }
    }
  },
  created() {
    this.initData();
    this.initSelect();
  },
  // watch: {
  //   mapPowerList: {
  //     handler(newName, oldName) {
  //     },
  //     immediate: true,
  //     deep: true
  //   }
  // },
  
  methods: {
    ...mapMutations([
      "updateInfo",
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),

    initData(searchForm) {
      // console.log(searchValue)
      let searchValue = searchForm || this.searchForm || '';
      let data = searchValue;
      data.curPage = this.page.curPage;
      data.pageSize = this.page.pageSize;

      this.post({
        API: 'selectBmStudentPageList',
        data: data
      }).then(res => {
        this.tableData = res.data;
        this.page = res.page;
      }).catch(err => {
        this.$message.error(err);
      })
    },

    initSelect() {
      this.post({    // 校区
        API: 'queryAllSchool',
        data: {}
      }).then(res => {
        this.schoolList = res;
      })
    },

    // 新增提交
    submitAdd(formName) {
      let data = this.formData;

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.post({
            API: 'insert',
            data: data
          }).then(res => {
            // console.log(res)
            if(res == 1) {
              this.$message.success('新建成功')
              this.initData();
              this.popupState.showStatus = false;
            }
          }).catch(err => {
            this.$message.error(err);
          })
        } else {
          // console.log('error submit!!');
          return false;
        }
      });

      
    },

    // 编辑提交
    submitEdit(rowData) {
      this.formData.isLogin = this.isLogin == true? '1': '0'
      let data = this.formData
      data.studentId = this.studentId;

      this.$refs['ruleForm'].validate((valid) => {
        if(valid) {
          this.post({
            API: 'update',
            data: data
          }).then(res => {
            this.$message.success('修改成功');
            this.initData();
            this.popupState.showStatus = false;
          }).catch(err => {
            this.$message.error(err);
          })
        }
      });
      
    },


    // 表格详情
    tableDetail(rowData) {
      this.studentId = rowData.row.studentId;
      let data = {
        id: this.studentId,
      }
      this.formGet({
        API: 'selectById',
        data: data
      }).then(res => {
          this.popupState = {
          popupName: '学员详情',
          showStatus: true,
        }
        this.checkStatus = true;
        this.$refs['ruleForm'].resetFields();
        res.sex = res.sex.toString();
        this.formData = res;

      }).catch(err => {
        this.$message.error(err);
      })

    },
    // 表格编辑 回显
    tableEdit(rowData) {
      this.checkStatus = false;
      this.studentId = rowData.row.studentId;
      let data = {
        id: this.studentId,
      }
      this.formGet({
        API: 'selectById',
        data: data
      }).then(res => {
        this.popupState = {
          popupName: '编辑学员',
          showStatus: true,
        }
        this.$refs['ruleForm'].resetFields();
        res.sex = res.sex.toString();
        this.formData = res;
        
      }).catch(err => {
        this.$message.error(err);
      })
    },



    // 表格删除
    tableDelete(rowData) {
      let studentId = rowData.row.studentId;
      let data = {
        id: studentId,
      }

      this.$confirm('是否删除该学员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formGet({
          API: 'deleteById',
          data: data
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.initData();
        }).catch(err => {
          this.$message.error(err);
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });

      
      
    },

    showPopup(formName) {
      this.checkStatus = false;
      this.popupState = {
        showStatus: true,
        popupName: '新建学员',
      },
      this.$refs[formName].resetFields();   // 初始化
    },
    searchData(searchValue) {
      this.page.curPage = 1;
      this.initData(searchValue)
    },


    schoolChange(e) {
      this.schoolList.forEach(item => {
        if(item.schoolId == e) {
          this.formData.schoolName = item.schoolName;
        }
      })
    },
    tbJobNameChange(e) {
      this.tbJobNameList.forEach(item => {
        if(item.dicCode == e) {
          this.formData.positionName = item.dicLabel;
        }
      })
    },
    tbJobLevelChange(e) {
      this.tbJobLevelList.forEach(item => {
        if(item.dicCode == e) {
          this.formData.rankName = item.dicLabel;
        }
      })
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page.curPage = val;
      this.initData();
    }
    
  },
  computed: {
    ...mapState([
    ]),
    // ...mapGetters(["selectedIds"])
  },
  components: {
    adminTable,
  },
}

</script>